<template>
    <el-row class="container" :gutter="0">
      <el-col :span="12" class="grid-item">
        <div class="content">
            <el-row>
              <span class="title">ECG</span>
            </el-row>
            <el-row >
              <div class="number-content"  >
                <span class="title">BPM</span>
                <span class="number" >{{value1}}</span>
              </div>
            </el-row>
          <el-row >
            <div style="width: 100vw; height: 22vh;" id="EdgeInfoChart"></div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12" class="grid-item">
        <div class="content">
        <el-row>
            <div class="number-content" style="justify-content: center; height: 28vh;">
              <div style="width: 90%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 10px;">
                <!-- 第一个大div -->
                <div style="width: 48%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
                  <div style="display: flex; flex-direction: column; justify-content: space-between; margin-right: 3rem;">
                    <span class="number1">Et</span>
                    <span class="number-title">mmHg</span>
                  </div>
                  <div class="number3" style="text-align: center;">
                    {{et}}
                  </div>
                </div>

                <!-- 第二个大div -->
                <div style="width: 48%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
                  <div style="display: flex; flex-direction: column; justify-content: space-between; margin-right: 3rem;">
                    <span class="number1">Fi</span>
                    <span class="number-title">mmHg</span>
                  </div>
                  <div class="number3" style="text-align: center;">
                    {{fi}}
                  </div>
                </div>
              </div>
            </div>
          </el-row>
        <el-row >
          <div style="width: 100vw; height: 22vh;" id="EdgeInfoChart3"></div>
        </el-row>
        </div>
      </el-col>
      <el-col :span="12" class="grid-item">
        <div class="content">
<!--          <el-row>-->
<!--            <span class="title">ECG</span>-->
<!--          </el-row>-->
<!--          <el-row >-->
<!--            <div class="number-content" >-->
<!--              <div style="display:flex; width: 100%">-->
<!--                <div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">-->
<!--                  <span class="number2">SYS/DIA</span>-->
<!--                  <span class="number2">mmHg</span>-->
<!--                </div>-->
<!--                <div style="width: 90%; display: flex; justify-content: center; align-items: center;">-->
<!--                  <span class="number1">120/80</span>-->
<!--                </div>-->
<!--              </div>-->

<!--            </div>-->
<!--          </el-row>-->
<!--          <el-row >-->
<!--            <div style="width: 100vw; height: 22vh;" id="EdgeInfoChart1"></div>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <div style="width: 100% ;color:#7EFD33;display: flex;flex-direction: column ">-->
<!--              <span class="number2">SYS/DIA</span>-->
<!--              <span class="number2">mmHg</span>-->
<!--            </div>-->

<!--          </el-row>-->
          <el-row >
            <div class="title" style="display: flex;flex-direction: column">
              <span >SYS / DIA</span>
              <span  style="font-size: 1.2rem">mmHg</span>
            </div>

          </el-row>
          <el-row >
            <div class="number-content"  >
<!--              <span class="title">BPM</span>-->
              <span class="number" >{{ sys }} / {{dia}}</span>
            </div>
          </el-row>
          <el-row >
            <div style="width: 100vw; height: 22vh;" id="EdgeInfoChart1"></div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12" class="grid-item">
        <div class="content" style="color: white;font-size: 2rem">
          <el-row :gutter="20" style="height: 15%; justify-content: center;align-items: center">
            <span style="font-size: 2rem;color: #7EFD33">气体监测 </span>
          </el-row>
          <!-- 第一行 -->
          <el-row :gutter="20" style="height: 20%;">
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;"></el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">Insp</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">Exp</el-col>
          </el-row>

          <!-- 第二行 -->
          <el-row :gutter="20" style="height: 20%;color: #6DADDB">
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">O2 %</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">{{o2_insp}}</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">{{o2_exp}}</el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row :gutter="20" style="height: 20%;">
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">Sev %</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">{{sev_insp}}</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">{{sev_exp}}</el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row :gutter="20" style="height: 20%;">
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">MAC</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">{{mac}}</el-col>
            <el-col :span="8" style="display: flex; justify-content: center; align-items: center; color: #7EFD33">AGE 40</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </template>

<script setup>

import * as echarts from 'echarts';
import {onBeforeUnmount, onMounted} from "vue";

const memChart = ref({});



let timer;

let data = [];
let data1 = [];
let data3 = [];

let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value1 = ref(0);
let value2 = ref(0);
let sys = ref(0);
let dia = ref(0);
let o2_insp = ref(0);
let o2_exp = ref(0);
let sev_insp = ref(0);
let sev_exp = ref(0);
let mac = ref(0);
let et = ref(0);
let fi = ref(0);
let value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
//   data.push(randomData());
// }
let option = {
  grid:{
    left:0,
    right:20,
    // top:30,
    // bottom:30,
    containLabel: true // 确保标签不被截断
  },
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      params = params[0];
      var date = new Date(params.name);
      return (
          date.getDate() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getFullYear() +
          ' : ' +
          params.value[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    // show:false,
    axisTick: {
      show: false  // 隐藏刻度线
    },
    axisLabel: {
      show: false  // 隐藏标签文字
    },
    type: 'time',
    splitLine: {
      show: false
    },
    boundaryGap: false,
  },
  yAxis: {
    show:false,
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    },
    max:0.8
  },
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data,
      color:'#7EFD33'
    },

  ]
};

let option1 = {
  grid:{
    left:0,
    right:20,
    // top:30,
    // bottom:35,
    containLabel: true // 确保标签不被截断
  },
  title: {
    text: 'PLETH',
    left: 17, // 距离左侧20像素
    top: 10,  // 距离顶部10像素
    textStyle: {
      color: '#7EFD33', // 设置标题颜色为红色
      fontSize:'1.3rem',
      // 可选其他样式：fontSize, fontWeight, fontFamily等
    }
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      params = params[0];
      var date = new Date(params.name);
      return (
          date.getDate() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getFullYear() +
          ' : ' +
          params.value[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    // show:false,
    axisTick: {
      show: false  // 隐藏刻度线
    },
    axisLabel: {
      show: false  // 隐藏标签文字
    },
    type: 'time',
    splitLine: {
      show: false
    },
    boundaryGap: false,
  },
  yAxis: {
    show:false,
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    },
    max:1.2
  },
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data,
      color:'#7EFD33'
    },

  ]
};
let option3 = {
  grid:{
    left:0,
    right:20,
    // top:30,
    // bottom:20,
    containLabel: true // 确保标签不被截断
  },
  title: {
    text: 'CO2(mmHg)',
    left: 17, // 距离左侧20像素
    top: 10,  // 距离顶部10像素
    textStyle: {
      color: '#7EFD33', // 设置标题颜色为红色
      fontSize:'1.3rem',
      // 可选其他样式：fontSize, fontWeight, fontFamily等
    }
  },
  xAxis: {
    axisTick: {
      show: false  // 隐藏刻度线
    },
    axisLabel: {
      show: false  // 隐藏标签文字
    },
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    show:false,
    max:1
  },
  series: [
    {
      data: simulateCO2Capnogram(),
      type: 'line',
      areaStyle: {}
    }
  ]
};
function init(){
  let myChart = echarts.init(document.getElementById('EdgeInfoChart'),'dark');
  let myChart1 = echarts.init(document.getElementById('EdgeInfoChart1'),'dark');
  let myChart3 = echarts.init(document.getElementById('EdgeInfoChart3'),'dark');
  // option.series.data = data.concat(simulateECGFrame(75))
  myChart.setOption(option);
  myChart1.setOption(option1);
  myChart3.setOption(option3);
  setInterval(function () {
    if (data.length > 100) {
      // data.shift();
      data.splice(0, 50)
    }
    // data.shift();
    // data.push(randomData());
    // data = data.concat(simulateECGFrame(75))
    // data = data.concat(simulateECGBeatWithQS())
    data = data.concat(simulateECGBeatFull())
    // data = data.concat(simulateCO2Capnogram1())
    // data = data.concat(simulatePulseWave())
    value1.value = getRandomInt(100);
    value2.value = getRandomInt(100);
    myChart.setOption({
      series: [
        {
          data: data
        }
      ]
    });


  }, 800);
  setInterval(function () {
    if (data1.length > 100) {
      // data.shift();
      data1.splice(0, 50)
    }
    // data.shift();
    // data.push(randomData());
    // data = data.concat(simulateECGFrame(75))
    // data = data.concat(simulateECGBeatWithQS())
    // data = data.concat(simulateECGBeatFull())
    data1 = data1.concat(simulatePulseWave())
    // value2.value = getRandomInt(100);
    myChart1.setOption({
      series: [
        {
          data: data1
        }
      ]
    });

  }, 800);
  setInterval(function (){
    sys.value = simulateSYS();
    dia.value = simulateDIA();
  },30000)
  setInterval(function (){
    o2_insp.value = GasSim.simulateO2Insp()
    o2_exp.value = GasSim.simulateO2Exp()
    sev_insp.value = GasSim.simulateSevInsp()
    sev_exp.value = GasSim.simulateO2Exp()
    mac.value = GasSim.simulateMAC()
  },5000)
  setInterval(function (){
    et.value = simulateEtCO2()
    fi.value = simulateFiO2()
  },4000)
  // setInterval(function () {
  //   if (data3.length > 500) {
  //     // data.shift();
  //     data3.splice(0, 50)
  //   }
  //   // data.shift();
  //   // data.push(randomData());
  //   // data = data.concat(simulateECGFrame(75))
  //   // data = data.concat(simulateECGBeatWithQS())
  //   // data3 = data3.concat(simulateCO2Capnogram())
  //   // data = data.concat(simulatePulseWave())
  //   value1.value = getRandomInt(100);
  //   value2.value = getRandomInt(100);
  //   var newData = data3.slice(50); // 移除第一个数据点
  //   // newData.push([data3[0][0] + 1, Math.random() * 100]); //
  //   data3 = data3.concat(simulateCO2Capnogram())
  //   // myChart3.setOption({
  //   //   series: [
  //   //     {
  //   //       data: data3
  //   //     }
  //   //   ]
  //   // });
  //   myChart3.setOption({
  //     xAxis: {
  //       data: newData.map(function (item) { return item[0]; })
  //     },
  //     series: [{
  //       data: newData
  //     }]
  //   });
  //
  // },4000)
  setInterval(function () {
    // 生成并添加新数据
    const newData = simulateCO2Capnogram();
    data3 = data3.concat(newData);

    // 保持固定数据长度（例如500），超出则移除最旧数据
    const maxLength = 100;
    if (data3.length > maxLength) {
      data3 = data3.slice(data3.length - maxLength);
    }

    // 更新随机值
    value1.value = getRandomInt(100);
    value2.value = getRandomInt(100);

    // 更新图表数据
    myChart3.setOption({
      xAxis: {
        data: data3.map(item => item[0])
      },
      series: [{
        data: data3
      }]
    });

  }, 5000); // 缩短间隔使移动更流畅

}

function simulateECGBeatWithQS() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm; // 当前周期时长 ~800 ms
  const samples = 50;
  const dt = rr / samples; // 每点时间间隔 ~16 ms

  // 高斯波参数
  const rAmp = 1.0;      // R 波幅度
  const qAmp = -rAmp * 0.15; // Q 波 ~R 波的 15% 幅度
  const sAmp = -rAmp * 0.1;  // S 波 ~R 波的 10% 幅度
  // 位于周期不同时间点
  const qCenter = rr * 0.2;
  const rCenter = rr * 0.3;
  const sCenter = rr * 0.4;

  const sigma = rr * 0.03; // sigma 控制波宽，大约 30 ms

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const qWave = qAmp * Math.exp(-((t - qCenter) ** 2) / (2 * sigma ** 2));
    const rWave = rAmp * Math.exp(-((t - rCenter) ** 2) / (2 * sigma ** 2));
    const sWave = sAmp * Math.exp(-((t - sCenter) ** 2) / (2 * sigma ** 2));
    const noise = (Math.random() - 0.5) * 0.02;
    // return { t: t, v: qWave + rWave + sWave + noise };
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        qWave + rWave + sWave + noise
      ]
    };
  });

  return data;
}
function simulateECGBeatFull() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm;  // ~800 ms
  const samples = 50;
  const dt = rr / samples;

  // 波幅设置
  const pAmp = 0.1;       // P 波较低
  const rAmp = 1.0;        // R 波最大
  const tAmp = 0.15;        // T 波幅度中等
  const qAmp = -0.35;       // Q 波较为明显
  const sAmp = -0.25;      // S 波明显提升

  // 波形时间中心（ms）
  const pCenter = rr * 0.12; // ~96 ms
  const qCenter = rr * 0.3;  // ~240 ms
  const rCenter = rr * 0.32;
  const sCenter = rr * 0.34;
  const tCenter = rr * 0.6;  // ~480 ms

  // 宽度设置
  const pSigma = rr * 0.05;    // ~40 ms，P 波较宽
  const qsSigma = rr * 0.02;   // ~16 ms QRS 更窄
  const tSigma = rr * 0.07;    // ~56 ms，T 波更平滑宽

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const pWave = pAmp * Math.exp(-((t - pCenter) ** 2) / (2 * pSigma ** 2));
    const qWave = qAmp * Math.exp(-((t - qCenter) ** 2) / (2 * qsSigma ** 2));
    const rWave = rAmp * Math.exp(-((t - rCenter) ** 2) / (2 * qsSigma ** 2));
    const sWave = sAmp * Math.exp(-((t - sCenter) ** 2) / (2 * qsSigma ** 2));
    const tWave = tAmp * Math.exp(-((t - tCenter) ** 2) / (2 * tSigma ** 2));
    const noise = (Math.random() - 0.5) * 0.015; // 小背景噪声

    const wave = pWave + qWave + rWave + sWave + tWave + noise;
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        wave
      ]
    };

  });

  return data;
}
function simulatePulseWave() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm;  // ~800 ms
  const samples = 50;
  const dt = rr / samples;

  // 波峰与反射参数
  const peakCenter = rr * 0.3;       // 主峰出现在周期的 30%
  const peakSigma = rr * 0.05;       // 主峰宽度约 40 ms
  const peakAmp = 1.0;               // 主峰幅度

  const notchCenter = rr * 0.45;     // 反射波凹陷出现在晚于主峰
  const notchSigma = rr * 0.02;      // 比主峰窄
  const notchAmp = -0.3;             // 凹陷幅度（负值）

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const peak = peakAmp * Math.exp(-((t - peakCenter) ** 2) / (2 * peakSigma ** 2));
    const notch = notchAmp * Math.exp(-((t - notchCenter) ** 2) / (2 * notchSigma ** 2));
    const noise = (Math.random() - 0.5) * 0.05;
    const wave = peak + notch + noise;
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        wave
      ]
    };
  });

  return data;
}
function resizeCharts() {
  const halfWidth = window.innerWidth / 2;
  const height = window.innerHeight * 0.7; // 保持高度为屏幕70%

  document.getElementById('EdgeInfoChart').style.width = `${halfWidth}px`;
  document.getElementById('EdgeInfoChart1').style.width = `${halfWidth}px`;
  document.getElementById('EdgeInfoChart3').style.width = `${halfWidth}px`;
  // 保持高度不变
  document.getElementById('EdgeInfoChart').style.height = `${height}px`;
  document.getElementById('EdgeInfoChart3').style.height = `${height}px`;
}
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}
function simulateSYS() {
  const min = 110;
  const max = 120;
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function simulateDIA() {
  const min = 60;
  const max = 80;
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomWalk(prev, target, step, min, max) {
  // 轻微回归目标（避免长时间漂移）
  const bias = (target - prev) * 0.2;
  const delta = (Math.random() * 2 - 1) * step + bias;
  const next = Math.min(max, Math.max(min, prev + delta));
  return next;
}
const GasSim = (() => {
  // ---- O2（以 %vol 显示）正常成人手术期常见 FiO2 40–60%，这里默认 50% 基线 ----
  let o2InspLast = 50.0;                 // %
  let o2ExpLast  = 44.0;                 // %（始终低于Insp的常见区间）

  // ---- Sev（七氟醚，以 vol% 显示）常用维持 1–2.5% ----
  let sevInspLast = 2.0;                 // vol%
  let sevExpLast  = 1.7;                 // vol%（通常略低于Insp）

  // ---- MAC（无量纲，常见 0.8–1.2）这里独立随机游走 ----
  let macLast     = 1.0;

  return {
    // O2（Insp）—— 吸入端氧浓度 %vol
    simulateO2Insp() {
      o2InspLast = randomWalk(o2InspLast, 50.0, 0.6, 30.0, 60.0);
      return +o2InspLast.toFixed(1); // 举例返回 48.7（%）
    },

    // O2（Exp）—— 呼气端氧浓度 %vol（一般低于Insp）
    simulateO2Exp() {
      // 设定目标略低于 50%：44% 为常用基线，可在 30–55% 内小幅波动
      o2ExpLast = randomWalk(o2ExpLast, 44.0, 0.6, 25.0, 55.0);
      return +o2ExpLast.toFixed(1);
    },

    // Sev（Insp）—— 吸入端七氟醚 vol%
    simulateSevInsp() {
      // 目标 2.0%，范围 0.5–3.5%，步进 0.08
      sevInspLast = randomWalk(sevInspLast, 2.0, 0.08, 0.5, 3.5);
      return +sevInspLast.toFixed(1); // 例如 1.96（vol%）
    },

    // Sev（Exp）—— 呼气端七氟醚 vol%（通常低于Insp）
    simulateSevExp() {
      // 目标 1.7%，范围 0.3–3.2%，步进 0.08
      sevExpLast = randomWalk(sevExpLast, 1.7, 0.08, 0.3, 3.2);
      return +sevExpLast.toFixed(1);
    },

    // MAC（分数）—— 无量纲（~0.8–1.2）
    simulateMAC() {
      // 以 1.0 为目标，0.75–1.30 合理范围，步进 0.03
      macLast = randomWalk(macLast, 1.0, 0.03, 0.75, 1.30);
      return +macLast.toFixed(2);
    }
  };
})();
function simulateEtCO2() {
  const baseEt = 40; // 基础 EtCO₂（mmHg）
  const variation = (Math.random() * 4 - 2); // ±2 mmHg 随机波动
  return +(baseEt + variation).toFixed(1);
}
function simulateFiO2() {
  const baseFi = 0.50; // 基础 FiO₂（50%）
  const variation = (Math.random() * 0.10 - 0.05); // ±0.05 随机波动
  return +(baseFi + variation).toFixed(1); // 保留三位小数
}
function simulateCO2Capnogram() {
  const samples = 50;
  const rr = 4000; // 单位 ms，模拟 4 秒呼吸周期
  const dt = rr / samples; // 每个采样间隔 ~80 ms

  // 模拟关键时间点
  const t_upstart = rr * 0.2;   // Phase II 上升起点 ~20% 周期
  const t_plateau_start = rr * 0.3; // 平台期开始 ~30%
  const t_plateau_end = rr * 0.7;   // 平台期结束 ~70%
  const t_downstart = rr * 0.75;  // 吸气下行起点 ~75%

  const riseSigma = rr * 0.05;    // 上升弧宽度
  const fallSigma = rr * 0.03;    // 下降弧宽度
  const plateauCO2 = 40;          // ETCO₂ 水平（mmHg）

  const data = Array.from({ length: samples }, (_, i) => {
    const t = i * dt;

    let value = 0;

    if (t >= t_upstart && t < t_plateau_start) {
      // Phase II 上升
      const frac = (t - t_upstart) / (t_plateau_start - t_upstart);
      value = plateauCO2 * (1 - Math.exp(- (frac ** 2) * 5));
    } else if (t >= t_plateau_start && t <= t_plateau_end) {
      // Phase III 平台
      value = plateauCO2 * (1 + (t - t_plateau_start) / (t_plateau_end - t_plateau_start) * 0.05);
    } else if (t > t_plateau_end && t <= t_downstart + fallSigma * 3) {
      // Phase IV 吸气下降
      const fs = fallSigma * 3;
      const frac = (t - t_plateau_end) / fs;
      value = plateauCO2 * Math.exp(- (frac ** 2) * 8);
    } else {
      // 基线期
      value = 0;
    }

    const noise = (Math.random() - 0.5) * 2; // +/-1 mmHg 噪声
    return Math.max(0, value + noise);
  });

  return data;
}
function simulateCO2Capnogram1() {
  const N = 25;
  const plateauLevel = 40;  // EtCO₂ 约 40 mmHg
  const noiseLevel = 0.5;   // 噪声 ±0.5 mmHg

  const data = new Array(N);

  for (let i = 0; i < N; i++) {
    const phase = i / N;
    now = new Date(+now + oneDay);
    let val = 0;
    if (phase < 0.2) {
      // Phase I: 吸气，baseline 0 → 0
      val = 0;
    } else if (phase < 0.4) {
      // Phase II: 上升阶段
      const t = (phase - 0.2) / 0.2; // 由 0 → 1
      val = plateauLevel * (1 - Math.cos(Math.PI * t)) / 2;
    } else if (phase < 0.8) {
      // Phase III: 平台期，略微上升
      const t = (phase - 0.4) / 0.4; // 0 → 1
      val = plateauLevel * (0.9 + 0.1 * t);
    } else {
      // Phase IV: 吸气下降
      const t = (phase - 0.8) / 0.2; // 0 → 1
      val = plateauLevel * (1 - t);
    }

    // 添加微小噪声
    const noise = (Math.random() * 2 - 1) * noiseLevel;
    // data[i] = Math.max(0, val + noise);
    data[i] = {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        noise
      ]
    }
  }

  return data;
}
// 初始化并监听窗口变化

onMounted(() => {
  // initNetWork();
  // initEdgeInfo()
  init();
  window.addEventListener('load', resizeCharts());
  window.addEventListener('resize', resizeCharts());
})
onBeforeUnmount(() => {
  // if (timer) {
  //   clearInterval(timer)
  // }
})
//定时更新数据
// timer = setInterval(function () {
//   getServer().then(response => {
//     server.value = response.data;
//     cpu.value = server.value.cpu;
//     sysFiles.value = server.value.sysFiles;
//     mem.value = server.value.mem;
//     jvm.value = server.value.jvm;
//     network.value = server.value.netWork;
//     // proxy.$modal.closeLoading();
//   }, (message) => {
//     clearInterval(timer)
//   });
// }, 2000)

</script>
<style lang="scss" scoped>
* {
  overflow: hidden !important;
}
.container {
  height: 100vh;
  margin: 0;
  background-color: black;
}

.grid-item {
  height: 50%;
  padding: 0;
  margin: 0;
}

.content {
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  //display: flex;
  //align-items: center;
  //justify-content: center;
  background-color: #100c2a;
}
.number-content{

  //width: 100vw;
  //height: 50vh;
  //justify-content: center;
  ////align-items: end;
  //display: flex;
  //flex-direction: column;
  .number{
    font-size: 6rem;
    font-weight: bold;
    color: #7EFD33
  }
  .number1{
    font-size: 1.5rem;
    font-weight: bold;
    color: #7EFD33
  }
  .number-title{
    font-size: 1.2rem !important;
    font-weight: bold;
    color: #7EFD33
  }
  .number2{
    font-size: 1.5rem;
    font-weight: bold;
    color: #7EFD33
  }
  .number3{
    font-size: 4rem;
    font-weight: bold;
    color: #7EFD33
  }
  .title{
    font-size: 1.5rem;
    font-weight: bold;
    color: #7EFD33;
    padding: 20px;
  }
  width: 100vw;
  height: 22vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中（取消注释并改为center） */
}
.title{
  font-size: 1.5rem;
  font-weight: bold;
  color: #7EFD33;
  padding: 20px;
}
</style>
